<template>
	<view class="full-page-custom flex flex-col root-style">
		<view class="flex-1">
			<view style="font-size: var(--text-12); color:#777; font-weight: bold; margin: 20rpx; margin-top: 80px;">
				词汇分布情况
			</view>
			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view style="width:90%; margin:50px auto 20px; flex-shrink: 0; display: flex;">
			<view style="flex:1; margin:3px;">
				<u-button @click="startreview" class="next-btn w-full" type="warning" :plain="true">
					<view class="next-text">按记忆周期</view>
				</u-button>
			</view>
			<view style="flex:1; margin:3px;">
				<u-button @click="studentreview" class="next-btn w-full" type="warning" :plain="true">
					<view class="next-text">按课程周期</view>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { ktlapi, ktluser, OT, dateFormat, TXRoom } from '@/utils/index.js';
	import QiunDataCharts from '@/pages-review/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts'

	export default {
		components: { QiunDataCharts },
		inheritAttrs: false,
		data() {
			return {
				chartData: {},
				LessUUID: "",
				StudentAccountID: 0,
				//您可以通过修改 config-ucharts.js 文件中下标为 ['funnel'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [5,5,5,5],
					dataLabel: true,
					enableScroll: false,
					legend: {
					  show: true,
					  position: "bottom",
					  lineHeight: 25
					},
					title: {
					  name: "生词比",
					  fontSize: 15,
					  color: "#666666"
					},
					subtitle: {
					  name: "0%",
					  fontSize: 25,
					  color: "#7cb5ec"
					}, 
					extra: {
					  ring: {
						ringWidth: 60,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					  }
					}
				  }
			};
		},
		onLoad(query) {
			this.StudentAccountID = query.ReviewAccountID;
			this.LessUUID = query.ReviewUUID;
		},
		onShow() {
			this.getServerData();
		},
		methods: {
			studentreview(){
				// console.log(this.StudentAccountID);
				uni.setStorageSync("ReviewAccountID",this.StudentAccountID);
				uni.switchTab({
					url:'../../pages/tabbar/review/reviewlist'
				})
			},
			startreview() {
				uni.redirectTo({
					url: "./reviewproc?uuid=" + this.LessUUID
				})
			},
			getServerData() {
				console.log(this.StudentAccountID);
				uni.showLoading({
					title: '加载中'
				});
				ktlapi({
					apiurl: OT.CommandSet,
					action: "Cus_GetStudentReviewWords",
					data: {
						"StudentAccountId": this.StudentAccountID
					}
				}).then(rsp => {
					uni.hideLoading();
					var res = {
						series: [{
							data: [{
									"LostLv": 9,
									"name": "9级",
									"centerText": "9级",
									"value": 0,
									"labelShow": false
								},
								{
									"LostLv": 8,
									"name": "8级",
									"centerText": "8级",
									"value": 0,
									"labelShow": false
								},
								{
									"LostLv": 7,
									"name": "7级",
									"centerText": "7级",
									"value": 0,
									"labelShow": false
								},
								{
									"LostLv": 6,
									"name": "6级",
									"centerText": "6级",
									"value": 0,
									"labelShow": false
								},
								{
									"LostLv": 5,
									"name": "5级",
									"centerText": "5级",
									"value": 0,
									"labelShow": false
								},
								{
									"LostLv": 4,
									"name": "4级",
									"centerText": "4级",
									"value": 0,
									"labelShow": false
								},
								{
									"LostLv": 3,
									"name": "3级",
									"centerText": "3级",
									"value": 0,
									"labelShow": false
								},
								{
									"LostLv": 2,
									"name": "2级",
									"centerText": "2级",
									"value": 0,
									"labelShow": false
								},
								{
									"LostLv": 1,
									"name": "1级",
									"centerText": "1级",
									"value": 0,
									"labelShow": false
								},
								{
									"LostLv": 0,
									"name": "熟悉",
									"centerText": "熟悉",
									"value": 0,
									"labelShow": false
								}
							]
						}]
					};

					var words = rsp.data.tables[0].table;
					var total = 0;
					for (var i = 0; i < words.length; i++) {
						total += words[i]["Cnt"];
					}
					console.log(total); 
					for (var j = 0; j < res.series[0].data.length; j++) {
						var row = res.series[0].data[j];
						for (var i = 0; i < words.length; i++) {
							if (row["LostLv"] == words[i]["LostLv"]) {
								row["value"] = words[i]["Cnt"];
								row["labelShow"] = true;
								row["labelText"] = row["centerText"]+row["value"] + "个";
							}
							
							if(total > 0 && words[i]["LostLv"] == 0){
								this.opts.subtitle.name = (words[i]["Cnt"]/total*100).toFixed(2)+'%';
							}
						}
					}

					console.log(res);

					 

					setTimeout(() => {
						this.chartData = JSON.parse(JSON.stringify(res));
					}, 500);
				});
			},
		}
	};
</script>

<style>
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>